<template>
  <div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">提成规则</div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="项目手工提成" prop="confHand">
                <el-radio-group v-model="ruleForm.confHand.confRule">
                  <el-radio label="R">按实收比例</el-radio>
                  <el-radio label="P">按原价比例</el-radio>
                  <el-radio label="F">按固定金额</el-radio>
                  <div class="ipt_iner">
                    <div class="ipt_number">
                      <el-input-number
                        v-model="ruleForm.confHand.confRuleMoney"
                        placeholder="请输入提成比例"
                        class="w-100 text-left"
                        :precision="2"
                        :min="0"
                        :max="ruleForm.confHand.confRule === 'F' ? 99999 : 100"
                        :controls="false"
                      ></el-input-number>
                      <div
                        class="percent"
                        v-show="
                          ruleForm.confHand.confRule === 'R' ||
                          ruleForm.confHand.confRule === 'P'
                        "
                      >
                        %
                      </div>
                      <div
                        class="yuan"
                        v-show="ruleForm.confHand.confRule === 'F'"
                      >
                        元
                      </div>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目加钟提成" prop="confClockAdd">
                <el-radio-group v-model="ruleForm.confClockAdd.confRule">
                  <el-radio label="R">按实收比例</el-radio>
                  <el-radio label="P">按原价比例</el-radio>
                  <el-radio label="F">按固定金额</el-radio>
                  <div class="ipt_iner">
                    <div class="ipt_number">
                      <el-input-number
                        v-model="ruleForm.confClockAdd.confRuleMoney"
                        placeholder="请输入提成比例"
                        class="w-100 text-left"
                        :precision="2"
                        :min="0"
                        :max="
                          ruleForm.confClockAdd.confRule === 'F' ? 99999 : 100
                        "
                        :controls="false"
                      ></el-input-number>
                      <div
                        class="percent"
                        v-show="
                          ruleForm.confClockAdd.confRule === 'R' ||
                          ruleForm.confClockAdd.confRule === 'P'
                        "
                      >
                        %
                      </div>
                      <div
                        class="yuan"
                        v-show="ruleForm.confClockAdd.confRule === 'F'"
                      >
                        元
                      </div>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目点钟提成" prop="confClockSpot">
                <el-radio-group v-model="ruleForm.confClockSpot.confRule">
                  <el-radio label="R">按实收比例</el-radio>
                  <el-radio label="P">按原价比例</el-radio>
                  <el-radio label="F">按固定金额</el-radio>
                  <div class="ipt_iner">
                    <div class="ipt_number">
                      <el-input-number
                        v-model="ruleForm.confClockSpot.confRuleMoney"
                        placeholder="请输入提成比例"
                        class="w-100 text-left"
                        :precision="2"
                        :min="0"
                        :max="
                          ruleForm.confClockSpot.confRule === 'F' ? 99999 : 100
                        "
                        :controls="false"
                      ></el-input-number>
                      <div
                        class="percent"
                        v-show="
                          ruleForm.confClockSpot.confRule === 'R' ||
                          ruleForm.confClockSpot.confRule === 'P'
                        "
                      >
                        %
                      </div>
                      <div
                        class="yuan"
                        v-show="ruleForm.confClockSpot.confRule === 'F'"
                      >
                        元
                      </div>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="项目加班提成" prop="confWork">
                <el-radio-group v-model="ruleForm.confWork.confRule">
                  <el-radio label="R">按实收比例</el-radio>
                  <el-radio label="P">按原价比例</el-radio>
                  <el-radio label="F">按固定金额</el-radio>
                  <div class="ipt_iner">
                    <div class="ipt_number">
                      <el-input-number
                        v-model="ruleForm.confWork.confRuleMoney"
                        placeholder="请输入提成比例"
                        class="w-100 text-left"
                        :precision="2"
                        :min="0"
                        :max="ruleForm.confWork.confRule === 'F' ? 99999 : 100"
                        :controls="false"
                      ></el-input-number>
                      <div
                        class="percent"
                        v-show="
                          ruleForm.confWork.confRule === 'R' ||
                          ruleForm.confWork.confRule === 'P'
                        "
                      >
                        %
                      </div>
                      <div
                        class="yuan"
                        v-show="ruleForm.confWork.confRule === 'F'"
                      >
                        元
                      </div>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveProjectCom">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getProjectCommission,
  CreateProjectCommission,
} from "@/api/business/parameter";
export default {
  name: "EryuoaStoreProjectCommission",

  data() {
    return {
      ruleForm: {
        confClockAdd: {
          confRule: "",
          confRuleMoney: "",
        },
        confClockSpot: {
          confRule: "",
          confRuleMoney: "",
        },
        confHand: {
          confRule: "",
          confRuleMoney: "",
        },
        confWork: {
          confRule: "",
          confRuleMoney: "",
        },
      },
      rules: {
        confHand: [
          { required: true, validator: this.validateConfHand, trigger: "blur" },
        ],
        confClockAdd: [
          {
            required: true,
            validator: this.validateconfClockAdd,
            trigger: "blur",
          },
        ],
        confClockSpot: [
          {
            required: true,
            validator: this.validateconfClockSpot,
            trigger: "blur",
          },
        ],
        confWork: [
          { required: true, validator: this.validateconfWork, trigger: "blur" },
        ],
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        type: 1, // 设置类型：1楼层设置2房间类型3床位管理
      },
      total: 0,
      ProjectCom: [],
    };
  },

  created() {
    this.getProjectCom();
  },

  mounted() {},

  methods: {
    //项目手工提成
    validateConfHand(rule, value, callback) {
      let { confHand } = this.ruleForm;
      let { confRuleMoney } = confHand;
      if (
        confRuleMoney === "" ||
        confRuleMoney === undefined ||
        confRuleMoney === null
      ) {
        callback(new Error("请输入提成比例"));
      } else {
        callback();
      }
    },

    //项目加钟提成
    validateconfClockAdd(rule, value, callback) {
      let { confClockAdd } = this.ruleForm;
      let { confRuleMoney } = confClockAdd;
      if (
        confRuleMoney === "" ||
        confRuleMoney === undefined ||
        confRuleMoney === null
      ) {
        callback(new Error("请输入提成比例"));
      } else {
        callback();
      }
    },

    //项目点钟提成
    validateconfClockSpot(rule, value, callback) {
      let { confClockSpot } = this.ruleForm;
      let { confRuleMoney } = confClockSpot;
      if (
        confRuleMoney === "" ||
        confRuleMoney === undefined ||
        confRuleMoney === null
      ) {
        callback(new Error("请输入提成比例"));
      } else {
        callback();
      }
    },

    //项目加班提成
    validateconfWork(rule, value, callback) {
      let { confWork } = this.ruleForm;
      let { confRuleMoney } = confWork;
      if (
        confRuleMoney === "" ||
        confRuleMoney === undefined ||
        confRuleMoney === null
      ) {
        callback(new Error("请输入提成比例"));
      } else {
        callback();
      }
    },
    // 保存提成规则
    SaveProjectCom() {
      const { confClockAdd, confClockSpot, confHand, confWork } = this.ruleForm;
      if (!confHand.confRule) {
        this.$message.error("请选择项目手工提成比例");
        return false;
      } else if (!confClockAdd.confRule) {
        this.$message.error("请选择项目加钟提成比例");
        return false;
      } else if (!confClockSpot.confRule) {
        this.$message.error("请选择项目点钟提成比例");
        return false;
      } else if (!confWork.confRule) {
        this.$message.error("请选择项目加班提成比例");
        return false;
      }

      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.CreateProjectCom();
        }
      });
    },

    resQ() {
      this.getProjectCom();
    },

    // 查询项目提成配置
    getProjectCom() {
      this.loading = true;
      getProjectCommission({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ruleForm = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CreateProjectCom() {
      this.loading = true;
      CreateProjectCommission(this.ruleForm)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ProjectCom = data.list;
            this.getProjectCom();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    SethandleClose() {
      this.resetFormData("ruleForm");
      this.$nextTick(() => {
        this.SetdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  position: relative;
  padding-bottom: 100px;
}
.ipt_iner {
  margin-top: 10px;
  .ipt_number {
    position: relative;
    .percent {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #333;
      font-size: 15px;
    }
  }
  .yuan {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    font-size: 15px;
  }
}
.el_btn_bottom {
  position: absolute;
  left: 800px;
  bottom: 20px;
}
</style>
